<template>
	<div class="row">
		<div class="rowItem">
			<div class="block">
				<div class="left">
					<img src="./assets/icon2.png" alt="" class="icon" />
				</div>
				<div class="right">
					<div class="title">本年度项目进场总数（宗）</div>
					<div class="val">
						<gsapNum :number="2628"></gsapNum>
					</div>
				</div>
			</div>
		</div>
		<div class="rowItem">
			<div class="block">
				<div class="left">
					<img src="./assets/icon1.png" alt="" class="icon" />
				</div>
				<div class="right">
					<div class="title">本年度总交易金额（亿元）</div>
					<div class="val">
						<gsapNum :number="136.68"></gsapNum>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="rowItem">
			<div class="block">
				<div class="title">本年度交易总金额（万元）</div>
				<flopUp :num="8234.23"></flopUp>
			</div>
		</div> -->
	</div>
</template>

<script>
	import gsapNum from "@/components/gsapNum/index.vue";
	export default {
		name: "item",
		components: {
			gsapNum
		},
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.row {
		height: 100%;
		display: flex;
		justify-content: space-between;

		.rowItem {
			height: 100%;
			width: 50%;
			padding: 0 8px;

			.block {
				height: 100%;
				box-sizing: border-box;
				position: relative;
				display: flex;
				position: relative;

				.left {
					width: 148px;
					background-image: url('assets/light.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					text-align: center;
					padding-top: 7%;

					.icon {
						width: 50px;
						height: 50px;
						animation: floating 3s ease infinite;
					}
				}

				.right {
					flex: 1;
					min-width: 0;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.title {
						color: #CAEFFF;
						font-size: 18px;
					}

					.val {
						font-size: 38px;
						font-family: 'DIN-Bold';
					}
				}
			}
		}
	}



	@keyframes floating {
		0% {
			transform: translateY(0);
			/* 初始位置 */
		}

		50% {
			transform: translateY(-8px);
			/* 向上移动4像素 */
		}

		100% {
			transform: translateY(0);
			/* 回到初始位置 */
		}
	}
</style>
